<template>
    <div class="unit-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
            <el-form :model="state.unitInfo" size="default" label-width="140px">
                <el-row :gutter="25">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="单位类型">
                            <el-select v-model="state.unitInfo.type" placeholder="选择单位类型" clearable class="w100">
                                <el-option label="长度" value="1"></el-option>
                                <el-option label="质量" value="2"></el-option>
                                <el-option label="体积" value="3"></el-option>
                                <el-option label="汇率" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="单位名称">
                            <el-input v-model="state.unitInfo.name" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="单位代码">
                            <el-input v-model="state.unitInfo.code" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="同主单位的转换因子">
                            <el-input v-model="state.unitInfo.factor" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="unitDialog">
import { reactive } from 'vue';
import { useUnitApi } from '/@/api/unit';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
    unitInfo: {
        id: '',
        type: '',
        name: '',
        code: '',
        factor: 1,
    },
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 引入 api 请求接口
const unitApi = useUnitApi();

// 打开弹窗
async function openDialog(type: string, unitId?: number) {
    if (type === 'edit') {
        const param = {
            'id': unitId,
        }
        const result = await unitApi.queryUnitDetail(param);
        if (result.data.length <= 0)
            return Promise.resolve(true);

        const unitDetail: Unit = result.data;

        state.unitInfo.id = unitDetail.id.toString();
        state.unitInfo.type = unitDetail.type.toString();
        state.unitInfo.name = unitDetail.name;
        state.unitInfo.code = unitDetail.code;
        state.unitInfo.factor = unitDetail.factor;

        state.dialog.title = '修改单位信息';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增单位信息';
        state.dialog.submitTxt = '新 增';
        clearUnitDialogInfo();
    }
    state.dialog.type = type;
    state.dialog.isShowDialog = true;
};

// 清除表单信息
const clearUnitDialogInfo = () => {
    state.unitInfo = {
        id: '',
        type: '',
        name: '',
        code: '',
        factor: 1,
    };
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

// 提交
async function onSubmit() {
    await unitApi.editUnit(state.unitInfo);
    closeDialog(); // 关闭弹窗
    emit('refresh');
};

// 暴露变量
defineExpose({
    openDialog,
});
</script>